<template>
  <div class="app-container">
    <el-form ref="createAccountFormValue" :model="createAccountFormValue" label-width="120px">
      <el-form-item :label="createAccountFormRemark.depositor">
        <el-input v-model="createAccountFormValue.depositor" />
      </el-form-item>
      <el-form-item :label="createAccountFormRemark.bankCardNumber">
        <el-input v-model="createAccountFormValue.bankCardNumber" />
      </el-form-item>
      <el-form-item :label="createAccountFormRemark.money">
        <el-input v-model="createAccountFormValue.money" />
      </el-form-item>
      <el-form-item :label="createAccountFormRemark.type">
        <el-select v-model="createAccountFormValue.type" placeholder="please select your deposit type">
          <el-option  v-for="item in createAccountFormRemark.typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="createAccountFormRemark.time">
        <el-col :span="11">
          <el-date-picker v-model="createAccountFormValue.time" type="date" placeholder="Pick a date" style="width: 100%;" />
        </el-col>
        <el-col :span="2" class="line">时长：(/月)</el-col>
        <el-col :span="3">
            <el-input v-model="createAccountFormValue.duration"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      createAccountFormRemark: {
        depositor: '存款人',
        bankCardNumber: '银行卡号',
        money: '存款金额',
        type: '存款类型',
        typeOptions: [
            {
                label: '定期存款',
                value: 'fixedDeposit'
            },
            {
                label: '活期存款',
                value: 'DemandDeposit'
            }
        ],
        time: '存款时间',
        duration: '时长'
      },
      createAccountFormValue: {
        depositor: 'steven',
        bankCardNumber: '123456',
        money: '103',
        type: '',
        time: '',
        duration: ''
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

